<template>
  <div v-infinite-scroll="loadMore" :infinite-scroll-immediate="false">
    <div class="text-center py-[24px]">
      <p class="font-bold text-[94px] text-center">
        <span>Arcade</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="313"
          height="24"
          viewBox="0 0 313 24"
          class="m-auto mt-[-40px]"
          fill="none">
          <path
            d="M4 20C4 20 55.2955 4 156.5 4C257.705 4 309 20 309 20"
            stroke="url(#paint0_linear_859_18739)"
            stroke-width="8"
            stroke-linecap="round" />
          <defs>
            <linearGradient
              id="paint0_linear_859_18739"
              x1="4"
              y1="12"
              x2="309"
              y2="12"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#F76B1B" />
              <stop offset="1" stop-color="#FA4130" />
            </linearGradient>
          </defs>
        </svg>
      </p>
      <p class="text-[20px] line-height-[150%] max-w-[820px] mx-auto mt-[10px]">
        Welcome! Creators, please step into the Arcade, compete in themed design challenges,
        showcase your skills, and battle for the top spot. Let the best creator win.
      </p>
    </div>
    <!-- tab -->
    <div
      class="flex gap-[40px] justify-center text-[#7A7A7A] sticky top-0 z-10 py-2 transition-all duration-300"
      ref="stickyRef"
      :class="{ 'bg-[#fff]': isSticky }">
      <div
        v-for="(tab, index) in tabList"
        :key="tab.id"
        class="cursor-pointer"
        @click="handleTabChange(tab.id)">
        <p :class="activeTab === tab.id ? 'base_active_tab_item' : 'base_tab_item'">
          {{ tab.name }}
        </p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="list px-[24px] py-[16px]">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div
          v-for="contest in contestData"
          :key="contest.aid"
          @click="goDetail(contest)"
          class="contest-card bg-[#fff] rounded-[8px] overflow-hidden hover:shadow-sm transition-all duration-300 cursor-pointer">
          <!-- 图片 -->
          <div class="image-container relative">
            <img
              :src="contest.img"
              :alt="contest.title"
              class="w-full h-[380px] object-cover object-center" />
          </div>

          <!-- 内容信息 -->
          <div class="py-[16px]">
            <div
              class="flex items-center justify-between w-full border-b border-[#EDEDED] pb-[16px]">
              <!-- 标题 -->
              <h3
                class="text-[18px] px-[24px] font-semibold text-[#0A0A0A] line-clamp-2 max-w-3/4 overflow-hidden text-ellipsis">
                {{ contest.title }}
              </h3>

              <div
                v-if="contest.status === ActivityStatus.Upcoming"
                class="text-[14px] font-[500] flex items-center gap-[8px] px-[24px] py-[8px] bg-[#E9F5FF] flex-shrink-0"
                style="border-radius: 44px 0 0 44px">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM16.5 13.5H12C11.8011 13.5 11.6103 13.421 11.4697 13.2803C11.329 13.1397 11.25 12.9489 11.25 12.75V6C11.25 5.80109 11.329 5.61032 11.4697 5.46967C11.6103 5.32902 11.8011 5.25 12 5.25C12.1989 5.25 12.3897 5.32902 12.5303 5.46967C12.671 5.61032 12.75 5.80109 12.75 6V12H16.5C16.6989 12 16.8897 12.079 17.0303 12.2197C17.171 12.3603 17.25 12.5511 17.25 12.75C17.25 12.9489 17.171 13.1397 17.0303 13.2803C16.8897 13.421 16.6989 13.5 16.5 13.5Z"
                    fill="#0066CC" />
                </svg>
                <div class="text-[#0066CC]">Begin in {{ diffTime(contest.start_time) }}d</div>
              </div>

              <div
                v-else-if="contest.status === ActivityStatus.Live"
                class="text-[14px] font-[500] flex items-center gap-[8px] px-[24px] py-[8px] bg-[#FFF2F2] flex-shrink-0"
                style="border-radius: 44px 0 0 44px">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
                    fill="#E53935" />
                </svg>
                <div class="text-[#E53935]">
                  Live Now | Ends in {{ diffTime(contest.end_time) }}d
                </div>
              </div>

              <div
                v-else
                class="text-[14px] font-[500] flex items-center gap-[8px] px-[24px] py-[8px] bg-[#F8F8F8] flex-shrink-0"
                style="border-radius: 44px 0 0 44px">
                <div class="text-[#7A7A7A]">Ended</div>
              </div>
            </div>

            <!-- 状态和参赛人数 -->
            <div class="flex items-center justify-between px-[24px] pt-[16px]">
              <!-- <div class="flex items-center text-[14px] text-gray-600">
                <span class="text-[#222] font-bold text-[16px]">Nex Available</span>
                <el-tooltip placement="top" :content="contest.participants.toLocaleString()">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    class="cursor-pointer"
                    fill="none">
                    <path
                      d="M10 2.5C5.85938 2.5 2.5 5.85938 2.5 10C2.5 14.1406 5.85938 17.5 10 17.5C14.1406 17.5 17.5 14.1406 17.5 10C17.5 5.85938 14.1406 2.5 10 2.5ZM9.76562 14.375C9.61111 14.375 9.46006 14.3292 9.33159 14.2433C9.20311 14.1575 9.10298 14.0355 9.04384 13.8927C8.98471 13.75 8.96924 13.5929 8.99939 13.4413C9.02953 13.2898 9.10394 13.1506 9.2132 13.0413C9.32246 12.9321 9.46166 12.8577 9.61321 12.8275C9.76476 12.7974 9.92184 12.8128 10.0646 12.872C10.2074 12.9311 10.3294 13.0312 10.4152 13.1597C10.5011 13.2882 10.5469 13.4392 10.5469 13.5938C10.5469 13.801 10.4646 13.9997 10.3181 14.1462C10.1715 14.2927 9.97283 14.375 9.76562 14.375ZM11.0719 10.3906C10.4387 10.8156 10.3516 11.2051 10.3516 11.5625C10.3516 11.7075 10.2939 11.8466 10.1914 11.9492C10.0888 12.0518 9.94973 12.1094 9.80469 12.1094C9.65965 12.1094 9.52055 12.0518 9.41799 11.9492C9.31543 11.8466 9.25781 11.7075 9.25781 11.5625C9.25781 10.7066 9.65156 10.0262 10.4617 9.48203C11.2148 8.97656 11.6406 8.65625 11.6406 7.95195C11.6406 7.47305 11.3672 7.10938 10.8012 6.84023C10.668 6.77695 10.3715 6.71523 10.0066 6.71953C9.54883 6.72539 9.19336 6.83477 8.91953 7.05508C8.40312 7.4707 8.35938 7.92305 8.35938 7.92969C8.35591 8.0015 8.33834 8.07194 8.30766 8.13696C8.27697 8.20199 8.23379 8.26033 8.18055 8.30866C8.12732 8.357 8.06509 8.39437 7.99742 8.41866C7.92974 8.44294 7.85795 8.45366 7.78613 8.4502C7.71432 8.44673 7.64388 8.42916 7.57886 8.39848C7.51383 8.36779 7.45549 8.3246 7.40716 8.27137C7.35882 8.21814 7.32145 8.15592 7.29716 8.08824C7.27288 8.02057 7.26216 7.94877 7.26562 7.87695C7.26992 7.78203 7.33594 6.92695 8.2332 6.20508C8.69844 5.83086 9.29023 5.63633 9.99102 5.62773C10.4871 5.62188 10.9531 5.70586 11.2691 5.85508C12.2148 6.30234 12.7344 7.04805 12.7344 7.95195C12.7344 9.27344 11.8512 9.8668 11.0719 10.3906Z"
                      fill="#CBCBCB" />
                  </svg>
                </el-tooltip>
              </div> -->
              <div></div>
              <div class="text-[14px] font-medium flex items-center gap-[16px]">
                <div class="flex items-center gap-[4px]">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none">
                    <path
                      d="M15.75 12C14.7844 12 13.8563 11.5687 13.125 10.7906C12.4172 10.0312 11.9813 9.01406 11.9063 7.93125C11.8266 6.77812 12.1781 5.71406 12.8953 4.94063C13.6125 4.17188 14.625 3.75 15.75 3.75C16.8657 3.75 17.8782 4.17656 18.5953 4.94531C19.3219 5.72344 19.6735 6.78281 19.5891 7.92656C19.5094 9.00938 19.0782 10.0266 18.3703 10.7859C17.6438 11.5688 16.7157 12 15.75 12ZM15.75 5.25C15.0469 5.25 14.4235 5.50312 13.9969 5.9625C13.5563 6.43594 13.3547 7.07812 13.4063 7.82344C13.4578 8.56406 13.7485 9.25781 14.2266 9.76875C14.6672 10.2422 15.211 10.5 15.75 10.5C16.2938 10.5 16.8328 10.2375 17.2735 9.76875C17.7516 9.25781 18.0422 8.56875 18.0938 7.82344C18.1453 7.10156 17.9344 6.44063 17.4938 5.97188C17.0672 5.50313 16.4438 5.25 15.75 5.25Z"
                      fill="#7A7A7A" />
                    <path
                      d="M21.9282 20.2501H9.57191C9.1641 20.2501 8.7891 20.0673 8.54066 19.7485C8.28285 19.4157 8.1891 18.9657 8.29222 18.5392C8.68598 16.9548 9.66566 15.6423 11.1188 14.7376C12.4079 13.936 14.0532 13.4954 15.7453 13.4954C17.4704 13.4954 19.0735 13.9173 20.3719 14.7188C21.8297 15.6142 22.8094 16.936 23.2032 18.5392C23.3063 18.9657 23.2125 19.4157 22.9547 19.7485C22.711 20.0673 22.336 20.2501 21.9282 20.2501ZM9.79222 18.7501H21.7125C20.9391 15.9845 18.0375 15.0001 15.75 15.0001C13.4719 15.0001 10.575 15.9845 9.79222 18.7501Z"
                      fill="#7A7A7A" />
                    <path
                      d="M6.89065 12.1874C5.24065 12.1874 3.79221 10.6546 3.65627 8.77022C3.58596 7.80459 3.88596 6.91397 4.49534 6.25772C5.10002 5.61084 5.94846 5.25459 6.88596 5.25459C7.81877 5.25459 8.66721 5.61553 9.2719 6.26709C9.88596 6.92803 10.186 7.81866 10.1156 8.77491C9.98909 10.6546 8.53596 12.1874 6.89065 12.1874ZM6.89065 6.74991C6.37502 6.74991 5.91565 6.93741 5.5969 7.27959C5.26877 7.63116 5.11409 8.10928 5.15627 8.66241C5.23596 9.75928 6.02815 10.6874 6.89065 10.6874C7.75315 10.6874 8.55002 9.75928 8.62502 8.66241C8.66252 8.12334 8.50315 7.63584 8.17971 7.28428C7.86096 6.93741 7.40159 6.74991 6.89065 6.74991Z"
                      fill="#7A7A7A" />
                    <path
                      d="M7.21879 18.7499H1.95472C1.58441 18.7499 1.24222 18.5812 1.01254 18.2952C0.778161 17.9952 0.693786 17.5827 0.787536 17.1983C1.11097 15.8905 1.91722 14.8124 3.11254 14.0718C4.16722 13.4202 5.50785 13.0593 6.88597 13.0593C8.06722 13.0593 9.07504 13.2562 9.96566 13.664C10.3407 13.8374 10.5094 14.2827 10.336 14.6577C10.1625 15.0327 9.71722 15.2015 9.34222 15.028C8.65316 14.714 7.8516 14.5593 6.89066 14.5593C5.17972 14.5593 3.01879 15.2718 2.33441 17.2546H7.21879C7.63129 17.2546 7.96879 17.5921 7.96879 18.0046C7.96879 18.4171 7.63129 18.7499 7.21879 18.7499Z"
                      fill="#7A7A7A" />
                  </svg>
                  <span class="text-[#7A7A7A]">{{ contest.participant_count }}</span>
                </div>
                <div class="flex items-center gap-[4px]">
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M4.5 3.75H7.29199C7.64114 3.75003 7.98555 3.8312 8.29785 3.9873L10.0312 4.85449C10.5518 5.11474 11.126 5.24997 11.708 5.25H19.5C20.7426 5.25 21.75 6.25736 21.75 7.5V18C21.75 19.2426 20.7426 20.25 19.5 20.25H4.5C3.25736 20.25 2.25 19.2426 2.25 18V6C2.25 4.75736 3.25736 3.75 4.5 3.75Z"
                      stroke="#7A7A7A"
                      stroke-width="1.5" />
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M6.40925 11.5303C7.2879 10.6518 8.71225 10.6518 9.59089 11.5303L13.5001 15.4395L15.4092 13.5303C16.2879 12.6518 17.7123 12.6518 18.5909 13.5303L22.0303 16.9697C22.3232 17.2626 22.3232 17.7374 22.0303 18.0303C21.7375 18.3231 21.2627 18.3231 20.9698 18.0303L17.5303 14.5908C17.2375 14.2981 16.7627 14.2981 16.4698 14.5908L10.5303 20.5303C10.2375 20.8231 9.76269 20.8231 9.46979 20.5303C9.1769 20.2374 9.1769 19.7626 9.46979 19.4697L12.4395 16.5L8.53034 12.5908C8.23749 12.2981 7.76266 12.2981 7.46979 12.5908L3.03034 17.0303C2.73746 17.3231 2.26269 17.3231 1.96979 17.0303C1.6769 16.7374 1.6769 16.2626 1.96979 15.9697L6.40925 11.5303ZM6.66706 6C6.94305 6.00018 7.16706 6.22397 7.16706 6.5V9.62598C7.16706 9.78572 6.98844 9.88158 6.85553 9.79297L6.00007 9.22168C5.89937 9.15455 5.7678 9.15465 5.66706 9.22168L4.81061 9.79297C4.67774 9.88113 4.50007 9.78653 4.50007 9.62695V6.49902C4.50026 6.22305 4.72405 6 5.00007 6H6.66706Z"
                      fill="#7A7A7A" />
                  </svg>
                  <span class="text-[#7A7A7A]">{{ contest.participant_feed_count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="text-center py-6 text-[#7A7A7A] text-[14px]">loading...</div>
  </div>
</template>

<script setup lang="ts">
  import { ActivityAPI } from '@/api/activity';
  import { useSticky } from '@/hook/useSticky';

  import { ActivityVO, ActivityStatus } from '@/types/activity';
  import { ref, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const stickyRef = ref<any>(null);
  const isSticky = useSticky(stickyRef);

  // 当前激活的tab
  const activeTab = ref(1);

  // tab列表数据
  const tabList = ref([
    {
      id: 1,
      name: 'Newest',
      type: 0, // 对应API的activity_type参数
    },
    {
      id: 2,
      name: 'Creativity Arcade',
      type: 1,
    },
    {
      id: 3,
      name: 'Nex Arcade',
      type: 2,
    },
  ]);

  // 竞赛数据
  const contestData = ref<ActivityVO[]>([]);
  // 加载状态
  const loading = ref(false);
  // 是否还有更多数据
  const hasMore = ref(true);
  // 当前页
  const currentPage = ref(0);
  // 每页条数
  const pageSize = ref(10);

  // 根据当前激活的tab获取对应的活动类型
  const currentActivityType = computed(() => {
    const tab = tabList.value.find((t) => t.id === activeTab.value);
    return tab ? tab.type : 0;
  });

  // 计算距离开始时间还有多少天
  const diffTime = (startTime: string) => {
    const diff = new Date(startTime).getTime() - Date.now();
    return Math.ceil(diff / (1000 * 60 * 60 * 24));
  };

  // tab切换处理
  const handleTabChange = (tabId: number) => {
    // 如果点击的是当前已激活的tab，则不执行任何操作
    if (tabId === activeTab.value) {
      return;
    }

    activeTab.value = tabId;
    // 切换tab时重置数据
    resetData();
    // 重新加载数据
    getActivityList();
  };

  // 重置数据
  const resetData = () => {
    contestData.value = [];
    currentPage.value = 0;
    hasMore.value = true;
  };

  // 获取活动列表
  const getActivityList = async () => {
    if (loading.value || !hasMore.value) return;

    loading.value = true;
    try {
      const res = await ActivityAPI.getActivityList({
        activity_type: currentActivityType.value,
        start: currentPage.value,
        size: pageSize.value,
      });

      const newData = res.data.activity_list || [];

      // 如果是第一页，替换数据；否则追加数据
      if (currentPage.value === 0) {
        contestData.value = newData;
      } else {
        contestData.value.push(...newData);
      }

      // 判断是否还有更多数据
      hasMore.value = res.data.has_more;
      // hasMore.value = true;

      // 增加页码
      currentPage.value++;
    } catch (error) {
      console.error('获取活动列表失败:', error);
      // 可以在这里添加错误提示
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    getActivityList();
  });

  // 加载更多
  const loadMore = async () => {
    await getActivityList();
  };

  // 记录goDetail函数执行时间
  const goDetail = (contest: ActivityVO) => {
    const startTime = performance.now(); // 记录开始时间

    console.log(`[Performance] 开始导航到竞赛详情页，竞赛ID: ${contest.aid}`);

    try {
      router.push({
        path: '/contest/detail',
        query: {
          aid: contest.aid,
        },
      });
    } catch (error) {
      console.error('[Performance] 导航失败:', error);
    } finally {
      const endTime = performance.now(); // 记录结束时间
      const executionTime = endTime - startTime;
      console.log(`[Performance] 导航函数执行完成，耗时: ${executionTime.toFixed(2)}ms`);
    }
  };
</script>

<style scoped lang="scss">
  .arcade-tab {
    p {
      &:hover {
        color: #222222;
      }
      // 为活动状态的tab单独设置颜色，覆盖hover效果
      &.text-\[\#F76B1B\] {
        color: #f76b1b;
        &:hover {
          color: #f76b1b;
        }
      }
    }
  }
  .line {
    width: 100%;
    height: 2px;
    background: transparent;
    transition: all 0.3s ease;

    &.active {
      background: rgba(247, 107, 27, 1);
    }
  }

  .cursor-pointer {
    transition: all 0.3s ease;
  }

  .contest-card {
    &:hover {
      transform: translateY(-2px);
    }
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
